<template>
    <div class='sub-category'>
        <div class="container">
            <div v-if='filterSubData'>
                <!-- 面包屑 -->
                <SubBread />
                <!-- 筛选分区 -->
                <SubFilter />
            </div>
            <SubSkeleton v-else />
            <!-- 商品分区 -->
            <div class="goods-list">
                <!-- 排序 -->
                <SubSort />
                <!-- 商品列表 -->
                <XtxInfiniteLoading v-model:loading="loading" :finished="finished" @load="onLoad">
                    <ul class="list" v-if="subCategoryData.items">
                        <li v-for="item in subCategoryData.items" :key="item.id">
                            <GoodsItem :good="item" />
                        </li>
                    </ul>
                </XtxInfiniteLoading>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SubCategory',
}
</script>


<script setup>
import { useRoute } from 'vue-router'
import SubBread from './components/SubBread.vue'
import SubFilter from './components/SubFilter.vue'
import SubSkeleton from './components/SubSkeleton.vue'
import SubSort from './components/SubSort.vue'
import GoodsItem from './components/GoodsItem.vue'
import { findCategoryGoods, findSubFilter } from '@/apis/category'
import { watch, ref, provide, reactive } from 'vue'

const route = useRoute()
const filterSubData = ref(null)
const loading = ref(false)
const finished = ref(false)
const subCategoryData = ref({})
const pageNum = ref(1)

const defaultPrarms = () => {
    return {
        // 分类id为必传参数，当二级分类 id 有变化，请求参数也需要更新
        categoryId: route.params.id, // 二级类别id
        inventory: false, // 是否只显示有库存
        onlyDiscount: false, // 是否只显示打折
        // brandId: null, // 品牌id
        attrs: [], // 选择的属性，object
        sortField: null, // 排序字段  [publishTime,orderNum,evaluateNum,price]
        sortMethod: null, // 排序方式
        page: pageNum.value, // 页码
        pageSize: 20 // 页容量
    }
}

const reqParams = reactive(defaultPrarms())

provide('filterSubData', filterSubData)
provide('reqParams', reqParams)


watch(() => route.params.id, () => {
    const paramsInit = defaultPrarms()
    for (const key in paramsInit) {
        reqParams[key] = paramsInit[key]
    }
    findSubFilter(route.params.id).then(({ result }) => {
        filterSubData.value = result
    }).catch(err => {
        console.log(err);
    })
}, { immediate: true })


watch(reqParams, () => {
    finished.value = false
    pageNum.value = 1
    findCategoryGoods(({ ...reqParams, page: pageNum.value })).then(({ result }) => {
        subCategoryData.value = result
    }).catch(err => {
        console.log(err);
    })
}, { immediate: true })

const onLoad = () => {
    if (subCategoryData.value?.items?.length < 1) return
    pageNum.value++
    // loading.value = true
    findCategoryGoods({ ...reqParams, page: pageNum.value }).then(({ result: { items = [] } }) => {
        subCategoryData.value.items.push(...items)
        if (items.length < reqParams.pageSize) {
            finished.value = true
        }
    }).catch(err => {
        console.log(err);
    }).finally(() => {
        console.log("finally", filterSubData.value);
        loading.value = false
    })
}

</script>


<style scoped lang="less">
.goods-list {
    background: #fff;
    padding: 0 25px;
    margin-top: 25px;

    ul {
        display: flex;
        flex-wrap: wrap;
        padding: 0 5px;

        li {
            margin-right: 20px;
            margin-bottom: 20px;

            &:nth-child(5n) {
                margin-right: 0;
            }
        }
    }
}
</style>